<template>
  <div>
    <mt-header fixed title="收货地址管理">
      <router-link to="/member" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <mt-button slot="right">
        <router-link to="/search">搜索</router-link>
      </mt-button>
    </mt-header>
    <div class="txt">
      <mt-button size="large" type="default" @click="jump()">添加收货地址</mt-button>
      <div class="mui-table-view">
        <div
          class="mui-input-group mui-table-view-cell "
          v-for='(item,index) in address' :key="index"
        >
          <div class="mui-slider-handle fileListBox">
            <p>
              <span>收货人：{{item.people}} &nbsp;&nbsp;邮编：{{item.postalcode}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>详细地址：{{item.detailed}}</span>
            </p>
          </div>
          <div
            class="mui-slider-right mui-disabled mui-tab-item fileListDele"
            @click="deleteSection(index)"
          >
            <a class="mui-btn mui-btn-red">删除</a>
          </div>
        </div>
      </div>
    </div>
    <mt-tabbar class="footer" fixed>
      <mt-tab-item id="index">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/">首页</router-link>
      </mt-tab-item>
      <mt-tab-item id="sort">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/sort">分类</router-link>
      </mt-tab-item>
      <mt-tab-item id="shoppingCar">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/shoppingCar">购物车</router-link>
      </mt-tab-item>
      <mt-tab-item id="member">
        <img src="../assets/icon.png" slot="icon">
        <router-link to="/member">会员中心</router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {

  data () {
    return {
      address: []
    }
  },

  methods: {
    jump () {
      this.$router.push({name: 'addaddress'})
    },
    deleteSection (i) {
      var addressData = JSON.parse(localStorage.getItem('addressData'))
      addressData.splice(i, 1)
      localStorage.setItem('addressData', JSON.stringify(addressData))
      this.address = JSON.parse(localStorage.getItem('addressData'))
    }
  },

  created () {
    this.address = JSON.parse(localStorage.getItem('addressData'))
  },
  mounted () {
    this.mui.init()
  }
}
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
  touch-action: none;
}
.footer a,
.mint-header a {
  color: white;
  text-decoration: none;
}
.mint-header {
  padding: 0 30 / 16rem;
}
.mint-tabbar {
  height: 55 / 16rem;
  background-color: #0094ff;
}
.txt {
  width: 100%;
  margin: 0 auto;
  margin-top: 40 / 16rem;
  a {
    color: #000;
    text-decoration: none;
  }
}
.mint-tab-item-icon {
  margin: 5 / 16rem auto 5 / 16rem;
}
.mui-table-view-cell{
  height:80 / 16rem;
  line-height: 40 / 16rem;
  z-index: 999;
  p {
  display: flex;
  flex-wrap: wrap;
  span {
    width: 100%;
  }
  }
}
.mui-table-view {
  height: 100%;
}
.mint-tab-item {
  .mint-tab-item-icon {
    margin: 6px auto 5px;
  }
}
.footer  {
  height: 55px;
}
</style>
